<template>
  <div class="btnbox">
    <button class="btn btndel" @click="delImage">
      <i class="el-icon-delete"></i>
      {{ $t('Button_Delete') }}
    </button>
    <button class="btn btnxia" @click="openRemove">
      <i v-show="!remove" class="el-icon-arrow-down"></i>
      <i v-show="remove" class="el-icon-arrow-up"></i>
    </button>
    <button class="btn btnremove" v-show="remove" @click="removeImage">
      <i class="el-icon-delete"></i>
      {{ $t('Button_ForceDelete') }}
    </button>
<!--    <router-link tag="button" to="/Image/FoundImage" class="btn btndadd">-->
<!--      <i class="el-icon-circle-plus-outline"></i>-->
<!--      创建镜像-->
<!--    </router-link>-->
    <button class="btn btndel active" @click="delImageUnuse">
      <i class="el-icon-delete"></i>
      {{ $t('Button_DeleteUnuse') }}
    </button>
    <button class="btn btndel active" @click="delImageHis">
      <i class="el-icon-delete"></i>
      {{ $t('Button_DeleteHis') }}
    </button>
    <el-popover
      :placement="'top'"
      width="350"
      :title="$t('ImageButton_Importimage')"
      trigger="click">
      <el-form label-width="100px" size="mini">
        <el-form-item :label="$t('ImageButton_Selectimagefile')">
          <input type="file" ref="imageFile">
        </el-form-item>
        <el-form-item>
          <el-button style="background: #067FB5; color: #fff;" @click="imageFileSubmit" plain>{{ $t('Button_SubmitImport') }}
          </el-button>
        </el-form-item>
      </el-form>
      <button id="imageImport" class="btn import" slot="reference">
        <span class="iconfont icon-daoru"></span>
        {{ $t('Button_Import') }}
      </button>
    </el-popover>
    <button class="btn export" @click="exportImage">
      <span class="iconfont icon-daoru1"></span>
      {{ $t('Button_Export') }}
    </button>
  </div>
</template>
<script>
import post from '@/utils/post'
import http from '@/utils/http'
export default {
  data () {
    return {
      remove: false,
      force: false
    }
  },
  props: ['checkImage'],
  methods: {
    // 导入image
    imageFileSubmit () {
      if (this.$refs.imageFile.files.length === 0) {
        return this.$message({
          showClose: true,
          message: '未选择文件！',
          type: 'error'
        })
      }
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let formdata = new FormData()
      formdata.append('image', this.$refs.imageFile.files[0], 'response.tar')
      let requestOptions = {
        method: 'POST',
        headers: {
          token: JSON.parse(localStorage.getItem('user')).token
        },
        body: formdata,
        redirect: 'follow'
      }
      fetch(localStorage.getItem('baseURL') + '/imageload', requestOptions)
        .then(response => {
          return response.json()
        })
        .then(res => {
          if (res.Code === 200) {
            this.$message({
              showClose: true,
              message: '导入成功！',
              type: 'success'
            })
            this.$emit('success')
          } else {
            this.$message({
              showClose: true,
              message: res.Msg || '网络不畅，请稍候重试',
              type: 'error'
            })
          }
          this.loading.close()
          document.getElementById('imageImport').click()
        })
        .catch(error => {
          // console.log(error)
          this.$message({
            showClose: true,
            message: error,
            type: 'error'
          })
          this.loading.close()
          document.getElementById('imageImport').click()
        })
    },
    // 显示强制删除按钮
    openRemove () {
      this.remove = !this.remove
    },
    //删除所有未使用
    delImageUnuse(){
      post({ url:'imagesprune' }, res => {
          if (res.message) {
            return this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
          this.$message({
            showClose: true,
            message: '所有未使用镜像已删除！',
            type: 'success'
          })
          this.$emit('delsuccess')
          this.force = false
        }, this, {  dangling: 0 })
    },
    // 清除历史
    delImageHis(){
      post({ url:'imagesprune' }, res => {
          if (res.message) {
            return this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
          this.$message({
            showClose: true,
            message: '所有历史镜像已删除！',
            type: 'success'
          })
          this.$emit('delsuccess')
          this.force = false
        }, this, {  dangling: 1 })
    },
    // 删除命令
    delImage () {
      if (this.checkImage.length < 1) {
        return this.$message({
          showClose: true,
          message: '未选择镜像！',
          type: 'warning'
        })
      }
      for (let a = 0; a < this.checkImage.length; a++) {
        const docker = `curl --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/images/${this.checkImage[a].Id}?force=${this.force}"` // 删除镜像
        post({ docker }, res => {
          if (res.message) {
            return this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
          this.$message({
            showClose: true,
            message: '镜像删除成功！',
            type: 'success'
          })
          this.$emit('delsuccess')
          this.force = false
        }, this)
      }
    },
    // 强制删除
    removeImage () {
      this.force = true
      this.delImage()
      this.remove = false
    },
    // 导出镜像
    exportImage () {
      if (this.checkImage.length < 1) {
        return this.$message({
          showClose: true,
          message: '未选择镜像！',
          type: 'warning'
        })
      }
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      for (let i = 0; i < this.checkImage.length; i++) {
        http({
          url: '/imagesave',
          method: 'POST',
          timeout: 60000000000,
          responseType: 'blob',
          data: {
            // image: `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/${this.checkImage[0].RepoTags[0]}/get"`
            image: this.checkImage[0].RepoTags[0]
          }
        }).then(res => {
          this.loading.close()
          if (res.status === 200) {
            const blob = new Blob([res.data], { type: 'application/x-tar' })
            const downloadElement = document.createElement('a')
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = 'image.tar' // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放blob对象
          } else {
            this.$message({
              showClose: true,
              message: res.Msg,
              type: 'error'
            })
          }
        }).catch((err) => {
          return err
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btnbox{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.btn{
  font-size: 12px;
  padding: 0px 15px;
  height: 32px;
  color: #fff;
}
.btnremove{
  position: absolute;
  background: #f56c6c;
  border-radius: 5px;
  padding: 0px 24px;
  top: 35px;
  z-index: 10;
}
.btndel{
  border-radius: 5px 0px 0px 5px;
  background: #f56c6c;
  &.active{
    margin-left: 10px;
    border-radius: 5px;
  }
}
.btnxia{
  border-radius: 0px 5px 5px 0px;
  background: #f56c6c;
}
.btndadd{
  border-radius: 5px;
  background: #409eff;
  margin-left: 20px;
}
.import{
  background: #409eff;
  border-radius: 5px 0px 0px 5px;
  margin-left: 20px;
}
.export{
  background: #409eff;
  border-radius: 0px 5px 5px 0px;
  margin-left: 1px;
}
</style>
